<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>后台登录</title>
    <%@include file="common/head.jsp" %>
    <link rel="stylesheet" href="${staticPath}/images/vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${staticPath}/images/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${staticPath}/images/css/fontastic.css">
    <link rel="stylesheet" href="${staticPath}/images/css/grasp_mobile_progress_circle-1.0.0.min.css">
    <link rel="stylesheet"
          href="${staticPath}/images/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="${staticPath}/images/css/style.default.css" id="theme-stylesheet">
    <link rel="stylesheet" href="${staticPath}/images/css/custom.css">
    <link rel="shortcut icon" href="${staticPath}/images/img/favicon.ico">
</head>

<script type="text/javascript">
    <c:if test="${sessionScope.user!=null}">
    window.location.href = "${contextPath}/main.jsp";
    </c:if>

    function login() {
        var loginname = $("#loginname").length > 0 ? $('#loginname').val().trim():null;
        var loginpw = $('#loginpw').length > 0 ? $('#loginpw').val().trim():null;
        var captcha = $('#captcha').length > 0 ? $('#captcha').val().trim():null;
        var type = $('#type').length > 0 ? $('#type').val().trim():null;
        if ($("#loginname").length > 0 && loginname == "") {
          alert("请输入用户名");
          $('#loginname').focus();
          return false;
        }
        if ($("#loginpw").length > 0 && loginpw == "") {
          alert("请输入密码");
          $('#loginpw').focus();
          return false;
        }
        if ($("#captcha").length > 0 && captcha == "") {
          alert("请输入验证码");
          $('#captcha').focus();
          return false;
        }

        var param = {
            loginname: loginname,
            loginpw: loginpw,
            type: type,
            captcha: captcha
        };
        $.ajax({
            type: 'post',
            url: '${basePath}/login',
            data: param,
            dataType: "json",
            success: function (resp) {
                if (resp.success) {
                  alert("登录成功！");
                    window.location.href = "${contextPath}/main.jsp";
                } else {
                    alert(resp.message);
                }
            }
        });
    }

    function loadimage() {
        document.getElementById("randImage").src = "${contextPath}/captcha?" + Math.random();
    }

</script>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="${staticPath}/images/img/login.png">
<div class="page login-page">
    <div class="container">
        <div class="form-outer text-center d-flex align-items-center">
            <div class="form-inner">
                <div class="logo text-uppercase"><span></span><strong class="text-primary">后台登录</strong></div>
                <%--<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>--%>

                <form name="form1" method="post" action=""
                      class="text-left form-validate">
                    <div class="form-group-material">
                        <label for="login-username" class="label-material">用户名:</label>
                        <input id="loginname" type="text" name="loginname" required
                               data-msg="Please enter your username"
                               class="layui-input">

                    </div>
                    <div class="form-group-material">
                        <label for="login-password" class="label-material"> &nbsp;&nbsp;&nbsp;密码:</label>
                        <input id="loginpw" type="password" name="loginpw" required
                               data-msg="Please enter your password"
                               class="layui-input">

                    </div>
                    <div class="form-group-material">
                        <label for="login-username" class="label-material"> &nbsp;权限:</label>
                        <select name="type" id="type" style="width:200px; height:35px" class="layui-input">
                            <option value="0">管理员</option>
                            <%--<option value="1">人事管理员</option>--%>
                            <option value="2">用户</option>

                        </select>
                    </div>
                    <div class="form-group-material">

                        <label for="login-username" class="label-material">验证码:</label>
                        <input name="captcha" style="width: 90px" type="text" id="captcha" class="layui-input">
                        <a href="javascript:loadimage();"><img alt="看不清请点我！" name="randImage"
                                                               id="randImage"
                                                               src="${contextPath}/captcha"
                                                               width="60"
                                                               height="20" border="1" align="absmiddle">
                        </a>
                    </div>
                    <div class="form-group text-center">
                        <input type="button" name="Submit" value="登录" class="btn btn-primary" onClick="login();">
                        <input type="reset" name="Submit2" value="重置" class="btn btn-primary">

                    </div>
                </form>
            </div>
            <div class="copyrights text-center"></div>
        </div>
    </div>
</div>
</body>
</html>
